<style lang="less">
.hmCoupon {
    .ivu-modal {
        width: 660px !important;
    }
}
</style>
<template>
    <Modal v-model="show" :title="editTitle" class="hmCoupon" :mask-closable="false">
        <Form ref="hmCouponForm" :model="hmCouponForm" :rules="hmCouponFormRule" :label-width="100">
            <FormItem label="优惠券名称" prop="couponName">
                <Input v-bind:disabled="disabled" type="text" :maxlength=50 v-model="hmCouponForm.couponName" placeholder="请输入优惠券名称"/>
            </FormItem>
            <FormItem label="副标题" prop="subTitle">
                <Input v-bind:disabled="disabled" type="text" :maxlength=50 v-model="hmCouponForm.subTitle" placeholder="请输入副标题"/>
            </FormItem>
            <FormItem label="使用条件" prop="cashCondition">
                <Input v-model="hmCouponForm.cashCondition" v-bind:disabled="disabled" type="number" style="width: 200px;"
                       onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))">
                    <template #prepend>
                        <span>满</span>
                    </template>
                    <template #append>
                        <span>元</span>
                    </template>
                </Input>
            </FormItem>
            <FormItem label="减免金额" prop="reduceAmount">
                <Input v-model="hmCouponForm.reduceAmount" v-bind:disabled="disabled" type="number" style="width: 200px;"
                       onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))">
                    <template #append>
                        <span>元</span>
                    </template>
                </Input>
            </FormItem>
<!--            <FormItem label="领券以后" prop="afterReceiveDays">-->
<!--                <Input v-model="hmCouponForm.afterReceiveDays" v-bind:disabled="disabled" type="number" style="width: 200px;"-->
<!--                       onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))">-->
<!--                    <template #append>-->
<!--                        <span>天生效</span>-->
<!--                    </template>-->
<!--                </Input>-->
<!--            </FormItem>-->
            <FormItem label="有效天数" prop="validDays">
                <Input v-model="hmCouponForm.validDays" v-bind:disabled="disabled" type="number" style="width: 200px;"
                       onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))">
                    <template #append>
                        <span>天</span>
                    </template>
                </Input>
            </FormItem>
            <FormItem label="每人限领" prop="limitNum">
                <Input v-model="hmCouponForm.limitNum" v-bind:disabled="disabled" type="number" style="width: 200px;"
                       onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))">
                    <template #append>
                        <span>张</span>
                    </template>
                </Input>
            </FormItem>
<!--            <FormItem label="库存" prop="sourceStock">-->
<!--                <Input v-model="hmCouponForm.sourceStock" v-bind:disabled="disabled" type="number" style="width: 200px;"-->
<!--                       onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))">-->
<!--                    <template #append>-->
<!--                        <span>张</span>-->
<!--                    </template>-->
<!--                </Input>-->
<!--            </FormItem>-->
        </Form>
        <div slot="footer">
            <Button type="text" @click="show=false">取消</Button>
            <Button type="primary" :loading="loading" @click="handSubmit" v-if="!disabled">提交</Button>
        </div>
    </Modal>
</template>
<script>
import {addHmCoupon, updateHmCoupon, getHmCoupon} from '@/api/hmzd/hmCoupon'

export default {
    name: "updateHmCoupon",
    props: {
        value: {
            type: Boolean,
            default: false
        },
        HmCouponId: {
            type: String
        },
        modalTitle: {
            type: String
        }
    },
    data() {
        const validaNumber = (rule,value,callback) => {
            if(value) {
                callback()
            }
            callback(new Error("请输入大于0的整数或者保留两位小数的正数"))
        };
        const validaAfterReceiveDays = (rule,value,callback) => {
            if(value || value == 0) {
                callback()
            }
            callback(new Error("领取后天数不能为空"))
        };
        const validaDays = (rule,value,callback) => {
            if(value) {
                callback()
            }
            callback(new Error("有效天数不能为空"))
        };
        const validaLimitNum = (rule,value,callback) => {
            if(value) {
                callback()
            }
            callback(new Error("用户领券上限不能为空"))
        };
        const validaSourceStock = (rule,value,callback) => {
            if(value) {
                callback()
            }
            callback(new Error("库存不能为空"))
        };
        return {
            show: this.value,
            editTitle: this.modalTitle,
            loading: true,
            disabled: false,
            hmCouponForm: {
                couponName: '',
                subTitle: '',
                cashCondition: null,
                reduceAmount: null,
                afterReceiveDays: null,
                validDays: null,
                limitNum: null,
                sourceStock: null,
            },
            hmCouponFormRule: {
                couponName: [{required: true, message: '优惠券名称不能为空！', trigger: 'blur'}, {type: 'string', max: 20, message: '数据的最大长度为20！', trigger: 'blur'}],
                subTitle: [{required: true, message: '副标题不能为空！', trigger: 'blur'}, {type: 'string', max: 32, message: '数据的最大长度为30！', trigger: 'blur'}],
                cashCondition: [{required: true, trigger: 'change', validator: validaNumber}],
                reduceAmount: [{required: true,  trigger: 'change', validator: validaNumber}],
                afterReceiveDays: [{required: true, trigger: 'change' , validator: validaAfterReceiveDays}],
                validDays: [{required: true, trigger: 'change' , validator:validaDays}],
                limitNum: [{required: true,  trigger: 'change' , validator:validaLimitNum}],
                sourceStock: [{required: true,  trigger: 'change' , validator:validaSourceStock}],
            }
        }
    },
    methods: {
        handSubmit() {
            this.$refs['hmCouponForm'].validate((valid) => {
                this.loading = true;
                if (valid) {
                    if (this.HmCouponId != null && this.HmCouponId.trim().length > 0) {
                        this.hmCouponForm.id = this.HmCouponId;
                        updateHmCoupon(this.hmCouponForm).then(res => {
                            if (res.success) {
                                this.closeModal(false);
                                this.$emit('handSearch');
                                this.$Message.success('保存成功');
                            } else {
                                this.$Message.error(res.msg);
                            }
                        }).finally(() => {
                            this.loading = false;
                        });
                    } else {
                        addHmCoupon(this.hmCouponForm).then(res => {
                            if (res.success) {
                                this.closeModal(false);
                                this.$emit('handSearch');
                                this.$Message.success('保存成功');
                            } else {
                                this.$Message.error(res.msg);
                            }
                        }).finally(() => {
                            this.loading = false;
                        });
                    }
                } else {
                    this.loading = false;
                    this.$Message.error('表单验证不通过！');
                }
            });
        },
        closeModal(val) {
            this.$emit('input', val);
        },
        initForm() {
            this.hmCouponForm = {
                couponName: '',
                subTitle: '',
                cashCondition: null,
                reduceAmount: null,
                afterReceiveDays: null,
                validDays: null,
                limitNum: null,
                sourceStock: null,
            };
        },
    },
    watch: {
        value(val) {
            this.show = val;
        },
        show(val) {
            this.initForm();
            this.loading = false;
            this.editTitle = this.modalTitle;
            if (this.editTitle == "查看") {
                this.disabled = true;
            } else {
                this.disabled = false;
            }
            if (val) {
                this.$refs['hmCouponForm'].resetFields();
                this.$refs['hmCouponForm'].couponId = null;
                if (this.HmCouponId != null && this.HmCouponId.trim().length > 0) {
                    getHmCoupon({id: this.HmCouponId}).then(res => {
                        if (res.success) {
                            this.hmCouponForm = res.data;
                        } else {
                            this.$Message.error(res.msg);
                        }
                    });
                }
            } else {
                this.closeModal(val);
            }
        }
    }
}
</script>
